<template>
  <uni-popup ref="popupBindPhoneDialog" type="center" :mask-click="false">
    <view class="container flex-col">
      <image class="img-close" src="@/static/login/guanbi.png" @click="close()"></image>
      <view class="flex-col title_container" v-if="from ==='pay'">
        <text class="title">
          支付成功，请绑定手机号！
        </text>
        <text class="title">
          防止你的会员丢失
        </text>
      </view>
      <view class="flex-col title_container" v-else-if="from ==='bind'">
        <text class="title">
          开始绑定手机号
        </text>
      </view>
      <view class="flex-col title_container" v-else-if="from ==='quit'">
        <text class="title">
          你已购买VIP，直接退出将丢失
        </text>
        <text class="title">
          请先绑定您的手机号
        </text>
      </view>
      <view class="flex-col title_container" v-else>
        <text class="title">
          为了防止你的会员丢失
        </text>
        <text class="title">
          请绑定您的手机号
        </text>
      </view>

      <view class="main-input-wrapper input-container">
        <input placeholder="请输入手机号" maxlength="11" v-model="phone" type="number" class="input" placeholder-class="placeholder"/>
      </view>
      <view class="main-input-wrapper input-container" style="margin-bottom: 44upx;">
        <input placeholder="请输入验证码" maxlength="4" v-model="captcha" class="input"
               type="number"
               placeholder-class="placeholder"/>
        <view class="divider"></view>
        <view :class="[time?'watting':'cando']" @click="toGetCaptcha">
          {{ time ? '重新获取 ' + time + 'S' : '获取验证码' }}
        </view>
      </view>
      <view @click="toUpdate" class="custom-btn primary input-container">确 认</view>
      <view class="help">如遇问题，请添加客服：{{ settings && settings.kefuPhone ? settings.kefuPhone : '' }}</view>
    </view>
    <CheckBindMergeDialog ref="CheckBindMergeDialog"></CheckBindMergeDialog>
  </uni-popup>
</template>

<script>
import {
  mapGetters,
  mapActions
} from 'vuex'

import {commonApi} from "@/api";
import CheckBindMergeDialog from "@/components/CheckBindMergeDialog.vue";

export default {
  name: "BindPhoneDialog",
  components: {CheckBindMergeDialog},
  data() {
    return {
      phone: '',
      captcha: '',
      time: 0,
      show: false,
      from: null
    };
  },
  computed: {
    ...mapGetters(['mine', 'settings'])
  },
  methods: {
    ...mapActions(['refreshUser']),
    open(from) {
      this.from = from
      this.$refs.popupBindPhoneDialog.open()
    },
    close() {
      this.closeTimeDown()
      this.$refs.popupBindPhoneDialog.close()
    },
    async toGetCaptcha() {
      if (this.time) {
        return
      }
      if (!this.checkPhone(this.phone)) {
        return
      }
      uni.showLoading({
        title: '加载中...',
      })
      try {
        const res = await commonApi.getCaptcha(this.phone)
        // console.log("hsf", "captcha:" + JSON.stringify(res))

        this.time = 60

        this._handler = setInterval(() => {
          if (this.time > 0) {
            this.time--
            // console.log("hsf", "time:" + this.time)
          } else {
            clearInterval(this._handler)
            this._handler = null
          }
        }, 1000)
      } catch (e) {
        if (e && e.message)
          uni.showToast({
            title: e.message,
            icon: 'none',
            duration: 2000
          });
      }
      uni.hideLoading()
    },
    closeTimeDown() {
      if (this._handler) {
        clearInterval(this._handler)
        this._handler = null
        this.time = 0
      }
    },
    checkPhone(phone) {
      console.log(phone)
      if (!phone || !(/^1\d{10}$/.test(phone))) {
        uni.showToast({
          title: '请输入有效的手机号',
          icon: 'none',
          duration: 2000
        });
        return false;
      }
      return true;
    },
    async toUpdate() {
      if (!this.phone || !this.captcha) {
        uni.showToast({
          title: '请输入手机号和验证码',
          icon: 'none',
          duration: 2000
        });
        return
      }
      if (!this.checkPhone(this.phone)) {
        uni.showToast({
          title: '请输入有效手机号',
          icon: 'none',
          duration: 2000
        });
        return
      }
      if (this.captcha.length !== 4) {
        uni.showToast({
          title: '验证码有效长度为4',
          icon: 'none',
          duration: 2000
        });
        return
      }
      try {
        uni.showLoading({
          title: '加载中...',
        })
        const res = await commonApi.checkBound('phone', {
          phone: this.phone,
          captcha: this.captcha,
        })
        // console.log('xxxxxxxxxx', res.data.data)
        if (res.data.data) {
          uni.hideLoading()

          await this.$refs.CheckBindMergeDialog.open('phone')
          uni.showLoading({
            title: '加载中...',
          })
          await commonApi.bindMerge('phone', {
            phone: this.phone,
            captcha: this.captcha,
          })
          await this.$refs.CheckBindMergeDialog.close()
          uni.hideLoading()
        } else {
          await commonApi.bindMerge('phone', {
            phone: this.phone,
            captcha: this.captcha,
          })
        }
        uni.showToast({
          title: '绑定成功！',
          icon: 'none',
          duration: 2000
        });
        await this.refreshUser()
        this.close()
      } catch (e) {
        if (e && e.data && e.data.msg) {
          uni.showToast({
            title: e.data.msg,
            icon: 'none',
            duration: 2000
          });
        }
      }
      uni.hideLoading()
    },
  },
}
</script>

<style lang="scss">
.container {
  width: 650upx;
  background-color: #fff;
  border-radius: 30rpx;
  position: relative;
  background-image: url("http://down.qwdata.vip/app_icon/1702973181443");
  background-size: contain;
  background-position: top;
  background-repeat: no-repeat;

  .img-close {
    position: absolute;
    top: 48upx;
    right: 48upx;
    width: 26upx;
    height: 26upx;
  }

  .main-input-wrapper {
    background-color: #eee;
  }

  .title_container {
    margin-top: 100rpx;

    .title {
      color: #090909;
      font-size: 20px;
      text-align: center;
      font-weight: bold;
      margin-bottom: 20rpx;
    }
  }

  .input-container {
    height: 108upx;
    margin-left: 40upx;
    margin-right: 40upx;
    border-radius: 100rpx;
  }

  .placeholder {
    font-size: 16px;
    color: #959595;
  }


  .custom-btn {
    font-size: 18px;
    margin-top: 40rpx;
  }

  .input {
    font-size: 16px;
    color: #000;
  }

  .divider {
    background-color: #ddd;
    width: 1px;
    height: 66upx;
    margin-right: 30upx;
  }

  .watting {
    font-size: 16px;
    color: #c5c5c5;
  }

  .cando {
    font-size: 16px;
    color: #3073F6;
  }

  .help {
    text-align: center;
    font-size: 22upx;
    margin-top: 40upx;
    margin-bottom: 52upx;
    color: #929292;
  }
}
</style>
